<template>
  <view class="home">
  <view class="home-nav-box"> <view class="home-nav"></view></view>
  <!-- 当前城市 -->
   <view class="home-current-city">
     <view class="home-current-city-title"><view>当前城市:</view></view>
     <view class="home-current-city-name"><view>临沂</view></view>
   </view>
   <!-- 热门城市 -->
   <view class="home-hot-city">
     <view class="home-hot-title">热门城市:</view>
     <view class="home-hot-name">
       <ul>
         <li>123</li>
       </ul>
     </view>
   </view>
   <!-- 所有城市 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        currentCity:[],
        hotCity:[],
        allCity:{}
      }
    },
    computed:{

    },
    mounted(){
      this.getHotCity()
      this.getAllCity()
    },
    methods: {
      async getHotCity(){
     let result = await uni.$http.get('/v1/cities?type=hot')
     if(result.statusCode==200){
       this.hotCity = result.data;
       console.log(this.hotCity)
     }
    },
    async getAllCity(){
      let result = await uni.$http.get('/v1/cities?type=group')
      if(result.statusCode==200){
        this.allCity = result.data;
      }
    }
  },
  }
</script>

<style lang="less" scoped>
 .home{
   .home-nav-box{
       height:88rpx;
     }
   .home-nav{
     position:fixed;
     top:0;
     width:100%;
     height:88rpx;
     background: rgb(49, 144, 232);
   }
   .home-current-city{
     width:100%;
     .home-current-city-title{
       height:66rpx;
       view{
         margin-left:18rpx;
         line-height: 66rpx;
       }
     }
     .home-current-city-name{
       width:100%;
       height:88rpx;
       border-top: 0.6rpx solid #c7c6c5;
       border-bottom: 0.6rpx solid #c7c6c5;
       view{
         font: 1.2rem/1.75rem Microsoft YaHei;
         margin-left:18rpx;
         color:#3190e8;
         line-height:88rpx;
       }
     }
   }
   .home-hot-city{
     width:100%;
     margin-top:12rpx;
     .home-hot-title{   margin-left:18rpx; }
     .home-hot-name{
       ul{
         display:flex;
         flex-wrap: wrap;
         margin:0;
         padding:0;
         margin-top:12rpx;
         list-style: none;
         li{
           width:187.9rpx;
           height:122rpx;
           text-align:center;
           line-height:122rpx;
           color:#3190e8;
           border-top: 0.8rpx solid #dadada;
           border-bottom: 1rpx solid #dadada;
           border-right: 1rpx solid #dadada;
           font-size:34rpx;
           font-weight:400;
         }
       }
     }
   }
   }
   

</style>
